<!-- pages/components/video/video.vue -->
<template>
	<view class="container">
		<!-- 视频列表容器 - 使用transition-group实现平滑动画 -->
		<view class="video-wrapper"
          @touchstart="onTouchStart"
          @touchend="onTouchEnd"
          @touchmove="onTouchMove">

			<!-- 当前视频 -->
			<view class="video-item current"
                :style="{ transform: `translateY(${currentOffset}px)`, zIndex: 10 }">
				<video
					class="fullscreen-video"
					:src="currentVideo.src"
					:autoplay="true"
					:controls="false"
					:show-play-btn="false"
					:show-center-play-btn="false"
					:loop="false"
					:muted="false"
					@ended="onVideoEnded"
					@error="onVideoError"
				></video>

				<!-- 视频信息覆盖层 -->
				<view class="video-overlay">
					<view class="video-info">
						<text class="video-title">{{ currentVideo.title }}</text>
						<text class="video-description">{{ currentVideo.description }}</text>
					</view>

					<!-- 互动按钮 -->
					<view class="interaction-buttons">
						<view class="interaction-item" @tap="toggleLike(currentVideo)">
							<view class="icon-wrapper">
								<text class="icon">{{ currentVideo.liked ? '❤️' : '🤍' }}</text>
							</view>
							<text class="count">{{ currentVideo.likes }}</text>
						</view>
						<view class="interaction-item" @tap="showComments">
							<view class="icon-wrapper">
								<text class="icon">💬</text>
							</view>
							<text class="count">{{ currentVideo.comments }}</text>
						</view>
						<view class="interaction-item" @tap="toggleFavorite(currentVideo)">
							<view class="icon-wrapper">
								<text class="icon">{{ currentVideo.favorited ? '⭐' : '☆' }}</text>
							</view>
							<text class="count">{{ currentVideo.favorites }}</text>
						</view>
						<view class="interaction-item" @tap="togglePlay">
							<view class="icon-wrapper">
								<text class="icon">{{ isPlaying ? '⏸️' : '▶️' }}</text>
							</view>
							<text class="count">{{ isPlaying ? '暂停' : '播放' }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 下一个视频 -->
			<view class="video-item next"
                :style="{ transform: `translateY(${nextOffset}px)`, zIndex: 9 }">
				<video
					class="fullscreen-video"
					:src="nextVideo.src"
					:autoplay="false"
					:controls="false"
					:show-play-btn="false"
					:show-center-play-btn="false"
					:loop="false"
					:muted="true"
					id="nextVideo"
				></video>

				<!-- 下一个视频的预览信息 -->
				<view class="next-video-preview">
					<text class="next-title">下一个: {{ nextVideo.title }}</text>
				</view>
			</view>

			<!-- 上滑提示 -->
			<view class="swipe-hint" :class="{ hidden: hideSwipeHint }">
				<view class="swipe-arrow">↑</view>
				<text class="swipe-text">上滑查看下一个视频</text>
			</view>
		</view>

		<!-- 加载提示 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>

		<!-- 视频进度指示器 -->
		<view class="progress-indicator">
			<view v-for="(video, index) in videos"
                :key="video.id"
                class="progress-dot"
                :class="{
                  active: currentVideo.id === video.id,
                  played: playedVideos.includes(video.id)
                }"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 视频列表
				videos: [
					{
						id: 1,
						src: "/static/video/01.mp4",
						title: "美丽风景",
						description: "欣赏大自然的壮丽景色",
						likes: 1234,
						comments: 56,
						favorites: 78,
						liked: false,
						favorited: false
					},
					{
						id: 2,
						src: "/static/video/02.mp4",
						title: "萌宠日常",
						description: "可爱的小猫咪日常玩耍",
						likes: 2567,
						comments: 89,
						favorites: 123,
						liked: false,
						favorited: false
					},
					{
						id: 3,
						src: "/static/video/03.mp4",
						title: "美食制作",
						description: "学习制作美味的家常菜",
						likes: 1890,
						comments: 67,
						favorites: 95,
						liked: false,
						favorited: false
					},
					{
						id: 4,
						src: "/static/video/04.mp4",
						title: "健身教程",
						description: "每天10分钟，塑造好身材",
						likes: 3456,
						comments: 134,
						favorites: 210,
						liked: false,
						favorited: false
					},
					{
						id: 5,
						src: "/static/video/05.mp4",
						title: "旅行日记",
						description: "探索世界各地的美景",
						likes: 1789,
						comments: 72,
						favorites: 88,
						liked: false,
						favorited: false
					}
				],
				currentVideo: null,
				nextVideo: null,
				currentOffset: 0, // 当前视频的垂直偏移
				nextOffset: 0,    // 下一个视频的垂直偏移
				startY: 0,
				isSwiping: false,
				loading: false,
				hideSwipeHint: false,
				playedVideos: [], // 记录已播放的视频ID
				isPlaying: true,
				videoContext: null,
				nextVideoContext: null
			}
		},
		onLoad() {
			// 初始化视频
			this.initVideos();

			// 5秒后隐藏滑动提示
			setTimeout(() => {
				this.hideSwipeHint = true;
			}, 5000);
		},
		onReady() {
			// 创建视频上下文
			this.videoContext = uni.createVideoContext('currentVideo');
			this.nextVideoContext = uni.createVideoContext('nextVideo');
		},
		methods: {
			// 初始化视频
			initVideos() {
				// 随机选择初始视频
				const randomIndex = Math.floor(Math.random() * this.videos.length);
				this.currentVideo = this.videos[randomIndex];
				this.playedVideos.push(this.currentVideo.id);

				// 预加载下一个视频
				this.preloadNextVideo();
			},

			// 预加载下一个视频
			preloadNextVideo() {
				let availableVideos = this.videos.filter(video =>
					!this.playedVideos.includes(video.id)
				);

				// 如果所有视频都播放过了，重置记录
				if (availableVideos.length === 0) {
					this.playedVideos = [];
					availableVideos = [...this.videos];
				}

				// 随机选择下一个视频
				const randomIndex = Math.floor(Math.random() * availableVideos.length);
				this.nextVideo = availableVideos[randomIndex];
			},

			// 触摸开始
			onTouchStart(e) {
				this.startY = e.touches[0].clientY;
				this.isSwiping = true;
			},

			// 触摸移动
			onTouchMove(e) {
				if (!this.isSwiping) return;

				const currentY = e.touches[0].clientY;
				const diffY = currentY - this.startY;
				const screenHeight = uni.getSystemInfoSync().windowHeight;

				// 限制滑动范围
				if (diffY < 0 && Math.abs(diffY) < screenHeight) {
					this.currentOffset = diffY;
					this.nextOffset = screenHeight + diffY;
				}
			},

			// 触摸结束
			onTouchEnd(e) {
				if (!this.isSwiping) return;

				const endY = e.changedTouches[0].clientY;
				const diffY = endY - this.startY;
				const screenHeight = uni.getSystemInfoSync().windowHeight;

				// 滑动距离超过屏幕高度的1/4，切换视频
				if (Math.abs(diffY) > screenHeight / 4 && diffY < 0) {
					this.switchToNextVideo();
				} else {
					// 未达到阈值，回弹到原位
					this.resetPosition();
				}

				this.isSwiping = false;
			},

			// 切换到下一个视频
			switchToNextVideo() {
				const screenHeight = uni.getSystemInfoSync().windowHeight;

				// 动画：当前视频向上移出，下一个视频向上移入
				this.currentOffset = -screenHeight;
				this.nextOffset = 0;

				// 动画完成后更新视频
				setTimeout(() => {
					// 更新当前视频
					this.currentVideo = this.nextVideo;
					this.playedVideos.push(this.currentVideo.id);

					// 预加载新的下一个视频
					this.preloadNextVideo();

					// 重置位置
					this.resetPosition();

					// 播放新视频
					this.playCurrentVideo();
				}, 300);
			},

			// 重置位置
			resetPosition() {
				this.currentOffset = 0;
				this.nextOffset = uni.getSystemInfoSync().windowHeight;
			},

			// 播放当前视频
			playCurrentVideo() {
				this.isPlaying = true;
				if (this.videoContext) {
					this.videoContext.play();
				}
			},

			// 暂停当前视频
			pauseCurrentVideo() {
				this.isPlaying = false;
				if (this.videoContext) {
					this.videoContext.pause();
				}
			},

			// 切换播放状态
			togglePlay() {
				if (this.isPlaying) {
					this.pauseCurrentVideo();
				} else {
					this.playCurrentVideo();
				}
			},

			// 视频播放结束
			onVideoEnded() {
				// 自动播放下一个视频
				this.switchToNextVideo();
			},

			// 视频播放错误
			onVideoError(e) {
				console.error('视频播放错误:', e);
				uni.showToast({
					title: '视频加载失败',
					icon: 'none'
				});

				// 尝试播放下一个视频
				setTimeout(() => {
					this.switchToNextVideo();
				}, 1000);
			},

			// 点赞/取消点赞
			toggleLike(video) {
				video.liked = !video.liked;
				if (video.liked) {
					video.likes++;
					uni.showToast({
						title: '已点赞',
						icon: 'success'
					});
				} else {
					video.likes--;
				}
			},

			// 收藏/取消收藏
			toggleFavorite(video) {
				video.favorited = !video.favorited;
				if (video.favorited) {
					video.favorites++;
					uni.showToast({
						title: '已收藏',
						icon: 'success'
					});
				} else {
					video.favorites--;
				}
			},

			// 显示评论
			showComments() {
				uni.showToast({
					title: '评论功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #000;
	}

	.video-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.video-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.video-item.current {
		transform: translateY(0);
	}

	.video-item.next {
		transform: translateY(100vh);
	}

	.fullscreen-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.video-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30px 20px 100px;
		background: linear-gradient(transparent, rgba(0,0,0,0.7));
		color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.video-info {
		flex: 1;
	}

	.video-title {
		display: block;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.video-description {
		display: block;
		font-size: 14px;
		opacity: 0.9;
	}

	.interaction-buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
	}

	.interaction-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.icon-wrapper {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
	}

	.interaction-item .icon {
		font-size: 24px;
	}

	.interaction-item .count {
		font-size: 12px;
	}

	.next-video-preview {
		position: absolute;
		bottom: 20px;
		left: 20px;
		background: rgba(0, 0, 0, 0.5);
		padding: 8px 12px;
		border-radius: 16px;
	}

	.next-title {
		font-size: 12px;
		color: #fff;
		opacity: 0.8;
	}

	.swipe-hint {
		position: absolute;
		bottom: 30px;
		left: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		opacity: 0.8;
		transition: opacity 0.5s ease;
		z-index: 20;
	}

	.swipe-hint.hidden {
		opacity: 0;
	}

	.swipe-arrow {
		font-size: 30px;
		margin-bottom: 5px;
		animation: bounce 2s infinite;
	}

	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-10px);
		}
		60% {
			transform: translateY(-5px);
		}
	}

	.swipe-text {
		font-size: 14px;
		background: rgba(0,0,0,0.5);
		padding: 8px 16px;
		border-radius: 20px;
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 16px;
		z-index: 100;
	}

	.progress-indicator {
		position: absolute;
		top: 50px;
		right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 20;
	}

	.progress-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		margin: 4px 0;
		transition: all 0.3s ease;
	}

	.progress-dot.active {
		background: #fff;
		transform: scale(1.2);
	}

	.progress-dot.played {
		background: rgba(255, 255, 255, 0.6);
	}
</style>